<!-- AUI Framework -->
<!DOCTYPE html>
    <html>
    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>AgileUI</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <!-- Favicons -->

        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/icons/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/icons/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/icons/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="assets/images/icons/apple-touch-icon-57-precomposed.png">
        <link rel="shortcut icon" href="assets/images/icons/favicon.png">

        <!--[if lt IE 9]>
          <script src="assets/js/minified/core/html5shiv.min.js"></script>
          <script src="assets/js/minified/core/respond.min.js"></script>
        <![endif]-->

        <!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" href="assets/css/minified/icons-ie7.min.css">
        <![endif]-->

        <!-- AgileUI CSS Core -->

        <link rel="stylesheet" type="text/css" href="assets/css/minified/aui-production.min.css">

        <!-- Theme UI -->

        <link id="layout-theme" rel="stylesheet" type="text/css" href="assets/themes/minified/agileui/color-schemes/layouts/default.min.css">
        <link id="elements-theme" rel="stylesheet" type="text/css" href="assets/themes/minified/agileui/color-schemes/elements/default.min.css">

        <!-- AgileUI Responsive -->

        <link rel="stylesheet" type="text/css" href="assets/themes/minified/agileui/responsive.min.css">

        <!-- AgileUI JS -->

        <script type="text/javascript" src="assets/js/minified/aui-production.min.js"></script>

        <script>
            jQuery(window).load(
                function(){

                    var wait_loading = window.setTimeout( function(){
                      $('#loading').slideUp('fast');
                      jQuery('body').css('overflow','auto');
                    },500
                    );

                });
        </script>

        <script type="text/javascript" src="../_assets/syntax-highlighter/scripts/shCore.js"></script>
        <script type="text/javascript" src="../_assets/syntax-highlighter/scripts/shBrushPhp.js"></script>
        <link type="text/css" rel="stylesheet" href="../_assets/syntax-highlighter/styles/shCoreDefault.css">
        <script type="text/javascript">SyntaxHighlighter.all();</script>

    </head>

    <body style="overflow: hidden;">
        <div id="loading" class="ui-front loader ui-widget-overlay bg-white opacity-100">
            <img src="assets/images/loader-dark.gif" alt="">
        </div>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <div id="page-wrapper" class="demo-example">

            <div id="page-sidebar">
                <div id="header-logo">
                    AgileUI <i class="opacity-80">v1.01</i>

                    <a href="#" class="tooltip-button" data-placement="bottom" title="Close sidebar" id="close-sidebar">
                        <i class="glyph-icon icon-align-justify"></i>
                    </a>
                    <a href="#" class="tooltip-button hidden" data-placement="bottom" title="Open sidebar" id="rm-close-sidebar">
                        <i class="glyph-icon icon-align-justify"></i>
                    </a>
                    <a href="#" class="tooltip-button hidden" title="Navigation Menu" id="responsive-open-menu">
                        <i class="glyph-icon icon-align-justify"></i>
                    </a>
                </div>
                <div id="sidebar-search">
                    <input type="text" id="" name="">
                    <i class="glyph-icon icon-search"></i>
                </div>
                <div id="sidebar-menu">
                    <ul>
                        <li>
                            <a href="index.html" title="Dashboard">
                                <i class="glyph-icon icon-dashboard"></i>
                                Dashboard
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" title="Components">
                                <i class="glyph-icon icon-code"></i>
                                Components
                            </a>
                            <ul>
                                <li>
                                    <a href="grid.html" title="Grid Layouts">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Grid Layouts
                                    </a>
                                </li>
                                <li>
                                    <a href="helper_classes.html" title="Helpers">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Helpers
                                    </a>
                                </li>
                                <li>
                                    <a href="chat.html" title="Chat">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Chat
                                    </a>
                                </li>
                                <li>
                                    <a href="notifications.html" title="Notifications">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Notifications
                                    </a>
                                </li>
                                <li>
                                    <a href="messaging.html" title="Messaging">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Messaging
                                    </a>
                                </li>
                                <li>
                                    <a href="progress.html" title="Progress">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Progress
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="aui_theming.html" title="Theming options">
                                <i class="glyph-icon icon-picture-o"></i>
                                Theming options
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" title="Pages">
                                <i class="glyph-icon icon-folder-open"></i>
                                Pages
                            </a>
                            <ul>
                                <li>
                                    <a href="login.html" title="Login">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Login example 1
                                    </a>
                                </li>
                                <li>
                                    <a href="login-alt.html" title="Login">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Login example 2
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Widgets">
                                <i class="glyph-icon icon-tags"></i>
                                Widgets
                                <span class="badge primary-bg radius-all-100">19</span>
                            </a>
                            <ul>
                                <li>
                                    <a href="tabs.html" title="Tabs">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Tabs
                                    </a>
                                </li>
                                <li>
                                    <a href="accordions.html" title="Accordions">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Accordions
                                    </a>
                                </li>
                                <li>
                                    <a href="datepicker.html" title="Datepicker">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Datepicker
                                    </a>
                                </li>
                                <li>
                                    <a href="timepicker.html" title="Timepicker">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Timepicker
                                    </a>
                                </li>
                                <li>
                                    <a href="colorpicker.html" title="Colorpicker">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Colorpicker
                                    </a>
                                </li>
                                <li>
                                    <a href="slider.html" title="Sliders">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Sliders
                                    </a>
                                </li>
                                <li>
                                    <a href="jgrowl_notifications.html" title="JGrowl Notifications">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        JGrowl Notifications
                                    </a>
                                </li>
                                <li>
                                    <a href="noty_notifications.html" title="Noty Notifications">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Noty Notifications
                                    </a>
                                </li>
                                <li>
                                    <a href="modal_windows.html" title="Modal Windows">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Modal Windows
                                    </a>
                                </li>
                                <li>
                                    <a href="tooltips.html" title="Tooltips">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Tooltips
                                    </a>
                                </li>
                                <li>
                                    <a href="popovers.html" title="Popovers">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Popovers
                                    </a>
                                </li>
                                <li>
                                    <a href="sortable.html" title="Sortable Elements">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Sortable Elements
                                    </a>
                                </li>
                                <li>
                                    <a href="dropdown_menus.html" title="Dropdown Menus">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Dropdown Menus
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Elements">
                                <i class="glyph-icon icon-laptop"></i>
                                Elements
                            </a>
                            <ul>
                                <li>
                                    <a href="content_boxes.html" title="Content Boxes">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Content Boxes
                                    </a>
                                </li>
                                <li>
                                    <a href="response_messages.html" title="Response Messages">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Response Messages
                                    </a>
                                </li>
                                <li>
                                    <a href="information_boxes.html" title="Information boxes">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Information boxes
                                    </a>
                                </li>
                                <li>
                                    <a href="badges.html" title="Badges &amp; Labels">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Badges &amp; Labels
                                    </a>
                                </li>
                                <li>
                                    <a href="overlays.html" title="Overlays">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Overlays
                                    </a>
                                </li>
                                <li>
                                    <a href="navigation_menus.html" title="Navigation Menus">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Navigation Menus
                                    </a>
                                </li>
                                <li>
                                    <a href="icons.html" title="Icons">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Icons
                                    </a>
                                </li>
                                <li>
                                    <a href="buttons.html" title="Buttons">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Buttons
                                    </a>
                                </li>
                                <li>
                                    <a href="pagination.html" title="Pagination">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Pagination
                                    </a>
                                </li>
                                <li>
                                    <a href="progress_bars.html" title="Progress Bars">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Progress Bars
                                    </a>
                                </li>
                                <li>
                                    <a href="typography.html" title="Typography">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Typography
                                    </a>
                                </li>
                                <li>
                                    <a href="animations.html" title="Animations">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Animations
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Data visualization">
                                <i class="glyph-icon icon-bar-chart-o"></i>
                                Data visualization
                            </a>
                            <ul>
                                <li>
                                    <a href="charts_piegauges.html" title="Pie Gauges">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Pie Gauges
                                    </a>
                                </li>
                                <li>
                                    <a href="charts_justgage.html" title="JustGage">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        JustGage
                                    </a>
                                </li>
                                <li>
                                    <a href="charts_sparklines.html" title="Sparklines">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Sparklines
                                    </a>
                                </li>
                                <li>
                                    <a href="charts_morris.html" title="Morris Charts">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Morris Charts
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Tables">
                                <i class="glyph-icon icon-table"></i>
                                Tables
                            </a>
                            <ul>
                                <li>
                                    <a href="tables.html" title="Normal tables">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Normal tables
                                    </a>
                                </li>
                                <li>
                                    <a href="tables_dynamic.html" title="Dynamic tables">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Dynamic tables
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" title="Forms">
                                <i class="glyph-icon icon-leaf"></i>
                                Forms
                            </a>
                            <ul>
                                <li>
                                    <a href="forms.html" title="Layouts &amp; Elements">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Layouts &amp; Elements
                                    </a>
                                </li>
                                <li>
                                    <a href="forms_validation.html" title="Forms validation">
                                        <i class="glyph-icon icon-chevron-right"></i>
                                        Forms validation
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="http://agileui.com/support-forums" title="Help &amp; Support">
                                <i class="glyph-icon icon-book"></i>
                                <span class="float-left">Help &amp; Support</span>
                                <span class="badge ui-state-default font-default radius-all-100">8</span>
                            </a>
                        </li>
                    </ul>
                </div>

            </div><!-- #page-sidebar -->
            
            <div id="page-main">

                <div id="page-main-wrapper">

                    <div id="page-header" class="clearfix">
                        <div id="page-header-wrapper" class="clearfix">
                            <div class="button-group dropdown">
                                <a class="btn" href="javascript:;">
                                    <span class="button-content">
                                        <i class="glyph-icon icon-check-sign float-left"></i>
                                        Page examples
                                    </span>
                                </a>
                                <a class="btn" href="javascript:;" data-toggle="dropdown">
                                    <span class="glyph-icon icon-separator">
                                        <i class="glyph-icon icon-angle-down"></i>
                                    </span>
                                </a>
                                <ul class="dropdown-menu push-left">
                                    <li>
                                        <a href="javascript:;" title="">
                                            <i class="glyph-icon icon-user mrg5R"></i>
                                            Login pages
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" title="">
                                            <i class="glyph-icon icon-user mrg5R"></i>
                                            Register pages
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" title="">
                                            <i class="glyph-icon icon-user mrg5R"></i>
                                            Fixed layout example
                                        </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <span class="badge badge-absolute float-left radius-all-100 mrg5R bg-green tooltip-button" title="" data-original-title="You can add badges even to dropdown menus!">7</span>
                                        <a href="javascript:;" title="">
                                            <i class="glyph-icon icon-user mrg5R"></i>
                                            Link with badge
                                        </a>
                                    </li>
                                    <li>
                                        <span class="badge badge-absolute float-left radius-all-100 mrg5R bg-green tooltip-button" title="" data-original-title="You can add badges even to dropdown menus!">7</span>
                                        <a href="javascript:;" title="">
                                            <i class="glyph-icon icon-user mrg5R"></i>
                                            Link with different color
                                        </a>
                                    </li>
                                    <li>
                                        <span class="badge badge-absolute float-left radius-all-100 mrg5R bg-green tooltip-button" title="" data-original-title="You can add badges even to dropdown menus!">7</span>
                                        <a href="javascript:;" title="">
                                            <i class="glyph-icon icon-user mrg5R"></i>
                                            Link with red icon
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div id="layout-demo" class="button-group dropdown">
                                <a class="btn" href="javascript:;">
                                    <span class="button-content">
                                        <i class="glyph-icon icon-sitemap float-left"></i>
                                        Layout options
                                    </span>
                                </a>
                                <a class="btn" href="javascript:;" data-toggle="dropdown">
                                    <span class="glyph-icon icon-separator">
                                        <i class="glyph-icon icon-angle-down"></i>
                                    </span>
                                </a>
                                <ul class="dropdown-menu float-right">
                                    <li class="header">
                                        Fixed Elements:
                                    </li>
                                    <li>
                                        <a class="add-fixed-sidebar" href="javascript:;" title="">
                                            Fixed sidebar
                                        </a>
                                        <a class="rm-fixed-sidebar hidden" href="javascript:;" title="">
                                            Static sidebar
                                        </a>
                                    </li>
                                    <li>
                                        <a class="add-fixed-header" href="javascript:;" title="">
                                            Fixed header
                                        </a>
                                        <a class="rm-fixed-header hidden" href="javascript:;" title="">
                                            Static header
                                        </a>
                                    </li>
                                    <li>
                                        <a class="add-fixed-footer" href="javascript:;" title="">
                                            Fixed footer
                                        </a>
                                        <a class="rm-fixed-footer hidden" href="javascript:;" title="">
                                            Static footer
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="top-icon-bar dropdown">
                                <a href="#" title="" class="user-ico clearfix" data-toggle="dropdown">
                                    <img width="36" src="assets/images/gravatar.jpg" alt="">
                                    <span>Horia Simon</span>
                                    <i class="glyph-icon icon-chevron-down"></i>
                                </a>
                                <ul class="dropdown-menu float-right">
                                    <li>
                                        <span class="badge badge-absolute float-left radius-all-100 mrg5R bg-green tooltip-button" title="" data-original-title="You can add badges even to dropdown menus!">7</span>
                                        <a href="javascript:;" title="">
                                            <i class="glyph-icon icon-user mrg5R"></i>
                                            Account Details
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" title="">
                                            <i class="glyph-icon icon-cog mrg5R"></i>
                                            Edit Profile
                                        </a>
                                    </li>
                                    <li>
                                        <a class="font-orange" href="javascript:;" title="">
                                            <i class="glyph-icon icon-flag mrg5R"></i>
                                            Notifications
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" title="">
                                            <i class="glyph-icon icon-signout font-size-13 mrg5R"></i>
                                            <span class="font-bold">Logout</span>
                                        </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li class="dropdown-submenu float-left">
                                        <a href="breadcrumb.html" data-toggle="dropdown" title="">
                                            Dropdown menu
                                        </a>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="javascript:;" title="">
                                                        Submenu 1
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;" title="">
                                                        Submenu 2
                                                    </a>
                                                </li>
                                                <li class="dropdown-submenu">
                                                    <a href="javascript:;" title="">
                                                        Submenu 3
                                                    </a>
                                                    <ul class="dropdown-menu">
                                                        <li>
                                                            <a href="javascript:;" title="">
                                                                Submenu 2-1
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" title="">
                                                                Submenu 2-2
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                    </li>
                                    <li>
                                        <a href="javascript:;" title="">
                                            Another menu item
                                        </a>
                                    </li>

                                </ul>
                            </div>
                            <div class="top-icon-bar">
                                <div class="dropdown">
                                    <a href="#" title="" data-toggle="dropdown">
                                        <span class="badge badge-absolute bg-orange">18</span>
                                        <i class="glyph-icon icon-comments-alt"></i>
                                    </a>
                                    <div class="dropdown-menu float-right">
                                        asd
                                    </div>
                                </div>
                                <div class="dropdown">
                                    <a href="#" title="" data-toggle="dropdown">
                                        <span class="badge badge-absolute bg-green">5</span>
                                        <i class="glyph-icon icon-bell"></i>
                                    </a>
                                    <div class="dropdown-menu float-right">
                                        asd
                                    </div>
                                </div>
                                <div class="dropdown">
                                    <a href="#" title="" data-toggle="dropdown">
                                        <span class="badge badge-absolute bg-red">21</span>
                                        <i class="glyph-icon icon-envelope-o"></i>
                                    </a>
                                    <div class="dropdown-menu float-right">
                                        asd
                                    </div>
                                </div>
                            </div>
                            <div id="theme-demo" class="button-group mrg10R float-right">

                                <a class="btn popover-button" href="javascript:;" data-id="#theme-styling" data-toggle="popover" data-placement="bottom">
                                    <span class="button-content">
                                        <i class="glyph-icon icon-lightbulb-o float-left"></i>
                                        <i class="glyph-icon icon-caret-down float-right"></i>
                                    </span>
                                </a>

                            </div>

                            <div id="theme-styling" class="hide">
                                <div class="small-box">
                                    <div class="bg-gray text-transform-upr font-size-12 font-bold font-gray-dark pad10A">Layout Color Schemes:</div>
                                    <div class="pad10A clearfix change-layout-theme">
                                        <p class="font-gray-dark font-size-11 pad0B">Hover for preview, click for setting the layout color scheme for all pages.</p>
                                        <div class="divider mrg10T mrg10B"></div>
                                        <a href="#" class="choose-theme" elements-theme="default" layout-theme="default" title="Default">
                                            <span title="Primary color" style="background: #37485D;"></span>
                                            <span title="Secondary color" style="background: #E4E9F0;"></span>
                                        </a>
                                    </div>

                                    <div class="bg-gray text-transform-upr font-size-12 font-bold font-gray-dark pad10A">Elements Color Schemes:</div>
                                    <div class="pad10A clearfix change-layout-theme">
                                        <p class="font-gray-dark font-size-11 pad0B">When you select a layout color scheme the elements inherit the styles from it, but you can also choose a different color scheme only for elements.</p>
                                        <div class="divider mrg10T mrg10B"></div>
                                        <a href="#" class="choose-theme" elements-theme="blue" layout-theme="" title="Blue">
                                            <span style="background: #f5f5f5;"></span>
                                            <span style="background: #a5a5a5;"></span>
                                        </a>
                                        <a href="#" class="choose-theme" elements-theme="default" layout-theme="" title="Default">
                                            <span title="Primary color" style="background: #37485D;"></span>
                                            <span title="Secondary color" style="background: #E4E9F0;"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div><!-- #page-header -->

                    <div id="page-breadcrumb-wrapper">
                        <div id="page-breadcrumb">
                            <a href="#" title="Dashboard">
                                <i class="glyph-icon icon-dashboard"></i>
                                Dashboard
                            </a>
                            <a href="#" title="Elements">
                                <i class="glyph-icon icon-laptop"></i>
                                Elements
                            </a>
                            <span class="current">
                                Example breadcrumb
                            </span>
                        </div>
                        <div class="float-right">
                            <a href="javascript:;" class="btn medium bg-white tooltip-button mrg5R" data-placement="bottom" title="Example buttons in breadcrumb bar">
                                <span class="button-content">
                                    <i class="glyph-icon icon-question font-green"></i>
                                </span>
                            </a>
                            <div class="dropdown">
                                <a href="javascript:;" class="btn medium bg-white mrg5R" title="Datepicker in dropdown" data-toggle="dropdown">
                                    <i class="glyph-icon icon-calendar"></i>
                                </a>
                                <div class="dropdown-menu pad0A float-right">
                                    <div class="datepicker remove-border no-shadow center-div" style="width: 350px;"></div>
                                </div>
                            </div>
                            <div class="dropdown">
                                <a href="javascript:;" class="btn medium bg-blue" title="Example dropdown" data-toggle="dropdown">
                                    <span class="button-content">
                                        <i class="glyph-icon icon-cog float-left"></i>
                                        <i class="glyph-icon icon-caret-down float-right"></i>
                                    </span>
                                </a>
                                <div class="dropdown-menu pad0A float-right">
                                    <div class="medium-box">
                                        <div class="bg-gray text-transform-upr font-size-12 font-bold font-gray-dark pad10A">Form example</div>
                                        <div class="pad10A">
                                            <p class="font-gray-dark pad0B">This <span class="label bg-green">dropdown box</span> uses the Twitter Bootstrap dropdown plugin.</p>
                                            <div class="divider mrg10T mrg10B"></div>

                                                <form id="demo-form" action="" class="col-md-12" method="">
                                                    <div class="form-row">
                                                        <div class="form-label col-md-4">
                                                            <label for="">
                                                                Name:
                                                                <span class="required">*</span>
                                                            </label>
                                                        </div>
                                                        <div class="form-input col-md-8">
                                                            <input type="text" id="email" name="email" data-type="email" data-trigger="change" data-required="true" class="parsley-validated">
                                                        </div>
                                                    </div>
                                                    <div class="form-row">
                                                        <div class="form-label col-md-4">
                                                            <label for="">
                                                                Email:
                                                                <span class="required">*</span>
                                                            </label>
                                                        </div>
                                                        <div class="form-input col-md-8">
                                                            <input type="text" id="email" name="email" data-type="email" data-trigger="change" data-required="true" class="parsley-validated">
                                                        </div>
                                                    </div>
                                                    <div class="form-row">
                                                        <div class="form-label col-md-4">
                                                            <label for="">
                                                                Website:
                                                            </label>
                                                        </div>
                                                        <div class="form-input col-md-8">
                                                            <input type="text" id="website" name="website" data-trigger="change" data-type="url" class="parsley-validated">
                                                        </div>
                                                    </div>
                                                    <div class="form-row">
                                                        <div class="form-label col-md-4">
                                                            <label for="" class="label-description">
                                                                Message:
                                                                <span>20 chars min, 200 max</span>
                                                            </label>
                                                        </div>
                                                        <div class="form-input col-md-8">
                                                            <textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]" class="parsley-validated"></textarea>
                                                        </div>
                                                    </div>
                                                    <div class="divider"></div>
                                                    <div class="form-row">
                                                        <input type="hidden" name="superhidden" id="superhidden">
                                                        <div class="form-input col-md-8 col-md-offset-4">
                                                            <a href="javascript:;" class="btn medium ui-state-default radius-all-4" id="demo-form-valid" onclick="javascript:$(&apos;#demo-form&apos;).parsley( &apos;validate&apos; );" title="Validate!">
                                                                <span class="button-content">
                                                                    Validate the form above
                                                                </span>
                                                            </a>
                                                        </div>
                                                    </div>

                                                </form>

                                        </div>

                                        <div class="bg-black font-size-12 font-orange pad10A mrg5L mrg5R">Custom header example</div>
                                        <div class="pad15A">
                                            <p class="font-green text-center font-size-14 pad0B">AgileUI comes with powerful helpers that you can use to create virtually any style you want. Read the documentation about helper classes to find out more!</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- #page-breadcrumb-wrapper -->
                    

<h4 class="heading-1 clearfix">
    <div class="heading-content">
        AgileUI Documentation
        <small>
            Below you will find a quick getting started guide. The left side menu contains source codes for all the included widgets, elements, components, etc.
        </small>
    </div>
    <div class="clear"></div>
    <div class="divider"></div>
</h4>

<h2>What is AgileUI</h2>
<p class="font-gray-dark">The AUI Framework is a HTML/CSS/JS framework that helps you quickly build modern, beautiful and accessible user interfaces for interactive web applications. It is powered by jQuery and includes a lot of UI interactions, effects, widgets, elements, components and themes. These make AUI a very powerful companion when it comes to solving all kinds of use cases. Read through the documentation to get an idea of how many widgets and elements are available. </p>

<div class="divider"></div>

<h2>Who is it for?</h2>
<p class="font-gray-dark">AUI is for both designers and developers. Designers can use the three layer theming system to create new styles. Because, in general, developers do not have an eye for design, the AUI framework helps them by removing the design-related issues and lets them concentrate on the app programming part.</p>

<div class="divider"></div>

<h2>Installing and Getting Started</h2>
<p class="font-gray-dark">First you need to download and uzip the AUI package archive.</p>
<p class="font-gray-dark">The package contains the following:</p>
<ul>
    <li><b>_build</b> - contains Grunt.js and the required Node.js plugins that are needed to minify and concatenate the assets files and to generate the demo &amp; docs html files.</li>
    <li><b>_assets</b> - contains all the source code css, js, font and image development files uncompressed and unminified.</li>
    <li><b>_content</b> - contains all the html files used in the generation of the demo &amp; docs files.</li>
    <li><b>documentation</b> - contains the documentation files</li>
    <li><b>production</b> - contains example HTML files with all widgets &amp; elements in action and production-ready assets (minified js files, concatenated, etc)</li>
    <li><b>changelog.txt</b> - changelog between version</li>
    <li><b>License</b> - AgileUI licence information</li>
    <li><b>Readme.md</b> - General informations about AgileUI</li>
</ul>

<div class="divider"></div>

<h2>Production-ready vs. Development Assets</h2>
<p class="font-gray-dark">The AUI framework package contains both the development &amp; production-ready files. Development files are represented by the uncompressed, standalone CSS and JS files. These should be used during development or debugging. In production-ready applications we recommend using the compressed and concatenated versions for CSS and JS files because it saves bandwidth and improves performance.</p>
<p class="font-gray-dark">In the document root you will notice three directories that start with underscore: <b>_assets</b>, <b>_build</b> and <b>_content</b>. These directories contain the development files that are used to generate the production-ready assets, demonstration &amp; documentation files. To generate these files we use Grunt. You can find the tasks configurations in <b>_build/Gruntfile.js.</b></p>

<p class="font-gray-dark">The root <b>/_assets/</b> folder contains the development files(css, js, images, fonts) which are uncompressed and standalone. The production assets can be found in the document root under <b>/production/assets/</b>.</p>
<p class="font-gray-dark">In the production assets directory each css and js file is minified under their respective <b>/minified/</b> folder.</p>
<p class="font-gray-dark">Each css &amp; js group (elements, widgets, components, etc) is also minified and concatenated together and can be found in <b>/production/assets/</b>.</p>
<p class="font-gray-dark">For example, the js core files are concatenated in <b>/production/assets/js/aui-core.js</b>. The minified version for this file is in <b>/production/assets/js/aui-core.min.js</b></p>
<p class="font-gray-dark">Another example is the tabs widget css development file which can be found in the document root under <b>/assets/css/widgets/tabs.css</b>. The production version can be found in <b>/production/assets/css/widgets/minified/tabs.min.css</b></p>
<p class="font-gray-dark">The <b>tabs.min.css</b> is also included in <b>/production/assets/css/aui-widgets.min.css</b> which contains all the widget css development files minified and concatenated.</p>
<p class="font-gray-dark">There is also a master minified css file that contains all the development css files from <b>/_assets/css/</b> that can be found in <b>/production/assets/app-production.min.css</b></p>

<div class="divider"></div>

<h2>Using AgileUI</h2>
<p class="font-gray-dark">To use AgileUI you need to include in your pages the following CSS and JS files.

<h3>All assets included</h3>
</p><p>This example shows a standard HEAD section for a production-ready page that has <b>all</b> the JS &amp; CSS files compressed, concatenated and included.</p>

<pre class="brush: php;">
    <!-- AgileUI CSS -->

    <link rel="stylesheet" type="text/css" href="assets/css/minified/aui-production.min.css">

    <!-- Theme UI -->

    <link id="layout-theme" rel="stylesheet" type="text/css" href="assets/themes/minified/agileui/color-schemes/layouts/default.min.css">
    <link id="elements-theme" rel="stylesheet" type="text/css" href="assets/themes/minified/agileui/color-schemes/elements/default.min.css">

    <link rel="stylesheet" type="text/css" href="assets/themes/minified/agileui/responsive.min.css">

    <!-- AgileUI JS -->

    <script type="text/javascript" src="assets/js/minified/aui-production.min.js"></script>

</pre>

<div class="divider"></div>

<h3>Selective included assets</h3>
<p>An example HEAD section for a page that uses only certain widgets &amp; CSS files.</p>

<pre class="brush: php;">

    <!-- AgileUI CSS -->

    <link rel="stylesheet" type="text/css" href="assets/css/minified/aui-helpers.min.css">

    <!-- AgileUI CSS Widgets -->

    <link rel="stylesheet" type="text/css" href="assets/css/minified/elements/buttons.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/minified/widgets/datepicker.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/minified/widgets/tabs.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/minified/widgets/dropdown.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/minified/widgets/tooltip.min.css">

    <!-- Theme UI -->

    <link id="layout-theme" rel="stylesheet" type="text/css" href="assets/themes/minified/agileui/color-schemes/layouts/default.min.css">
    <link id="elements-theme" rel="stylesheet" type="text/css" href="assets/themes/minified/agileui/color-schemes/elements/default.min.css">

    <link rel="stylesheet" type="text/css" href="assets/themes/minified/agileui/responsive.min.css">

    <!-- AgileUI JS (Uncomment the next line) -->

    <!-- <script type="text/javascript" src="assets/js/minified/aui-core.min.js"></script> -->

    <!-- AgileUI JS Widgets -->

    <script type="text/javascript" src="assets/js/minified/widgets/jqueryui-datepicker.min.js"></script>
    <script type="text/javascript" src="assets/js/minified/widgets/jqueryui-tabs.min.js"></script>
    <script type="text/javascript" src="assets/js/minified/widgets/bootstrap-dropdown.min.js"></script>
    <script type="text/javascript" src="assets/js/minified/widgets/bootstrap-tooltip.min.js"></script>

</pre>

<div class="divider"></div>

<h3>Required core files</h3>
<p class="font-gray-dark">These files are required and should not be removed. Development core js files are in <b>/_assets/js/core/</b>. The production-ready minified files are in <b>/production/js/core/</b>. The file that contains all the core js minified and concatenated can be found in <b>/production/assets/js/aui-core.min.js</b>.</p>

<b>Core js files:</b>
<ul>
    <li>jquery.1.10.2.js</li>
    <li>jquery.ui.core.js</li>
    <li>jquery.ui.mouse.js</li>
    <li>jquery.ui.position.js</li>
    <li>jquery.ui.widget.js</li>
</ul>

<div class="divider"></div>

<h2>Generating files locally</h2>
<p class="font-gray-dark">To generate the demo and docs files we use Grunt - the javascript task runner. To find out more about it read the <a href="http://gruntjs.com/getting-started" target="_blank" title="Grunt.js documentation">Grunt.js documentation</a>.</p>

<div class="divider"></div>

<h2>Theming</h2>
<p class="font-gray-dark">Because of the modular JS and CSS arhitecture you can use AgileUI to style both new and existing applications. The theming system is split into two layers which work seamlessly together: the layout style, the elements style and the core style helpers. Each theming CSS file has a minified version in <b>/production/assets/themes/minified/THEME_NAME/</b></p>

<p>You can use layout and elements styling files from different color schemes and even from different themes. For example, you can use the layout style (layout.css) from <b>/assets/themes/agileui/color-schemes/default/layout.css</b> together with the elements style from <b>/assets/themes/ANOTHER_THEME_NAME/color-schemes/green/elements.css</b>.

<h3>Layout style</h3>
</p><p>Contains all the styling need for the page layout (top menu, header, sidebar, main content area, footer). The layout style can be found in <b>/_assets/themes/THEME_NAME/color-schemes/COLOR_SCHEME_NAME/layout.css</b>.</p>

<h3>Elements style</h3>
<p>Contains all the styling need for the elements and widgets (buttons, tabs, menus, boxes, etc). The elements style can be found in <b>/_assets/themes/THEME_NAME/color-schemes/COLOR_SCHEME_NAME/elements.css</b>. </p>

<h3>Core style helpers</h3>
<p>Beside the layout &amp; elements styling that comes from the selected theme you can also style some elements using the CSS core helper classes. These files can be found in <b>/production/assets/css/minified/helpers/colors.min.css</b>. <a href="/documentation/helper_classes.html" target="_blank" title="Helper classes documentation">Click here</a> to read more about Helper classes.</p>

<h3>Responsive layouts</h3>
<p>This file makes AgileUI responsive for both mobile and tablet devices. The responsive layout styling can be found in <b>/_assets/themes/THEME_NAME/responsive.css</b>.</p>

<div class="divider"></div>

<h3>Sources and Credits</h3>
<p>All the jQuery widgets, plugins and fonts, icons, CSS assets that are used by AgileUI have free distribution and modification licenses (GPL, MIT, Apache 2.0). We also want to thank their respective owners for all the hard work they put into making the web an easier place.</p>
<ul>
    <li>jQuery v1.10.2</li>
    <li>jQuery UI v1.10.3</li>
    <li>jQuery UI Touch Punch 0.2.2</li>
    <li>jQuery Cookie Plugin v1.3.1</li>
    <li>Modernizr 2.6.2</li>
    <li>Raphaël 2.1.0</li>
    <li>Twitter Bootstrap 3.0</li>
    <li>JustGage v1.0</li>
    <li>Morris Charts v0.4.3</li>
    <li>EasyPieChart v1.2.1</li>
    <li>Sparkline Charts v2.1.2 </li>
    <li>Chosen Selects v1.0</li>
    <li>MiniColors</li>
    <li>DataTables v1.9.4</li>
    <li>jGrowl v1.2.12</li>
    <li>Noty v2.1.0</li>
    <li>Nicescroll v3.5.1</li>
    <li>Autosize v1.17.1</li>
    <li>Uniform v2.1.0</li>
    <li>Parsley</li>
</ul>


                	</div><!-- #page-content -->
	            </div><!-- #page-main -->
            </div><!-- #page-main-wrapper -->
        <!-- #page-wrapper -->

    </body>
</html>

